<template>
	<view class="page">
		<view class="page_header">
			<navigation defaultButton="back">订单列表</navigation>
			<view class="page_header_search_panel">
				<image class="page_header_search_icon" src="https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/search.png" mode="aspectFit"></image>
				<input class="page_header_search_input" @confirm="search()" v-model="searchText" type="text" value="" placeholder="请输入订单编号或者订单名称" placeholder-class="page_header_search_placeholder" />
			</view>
			<tabs class="tabs" :list="tabs" v-model="tabActive" seamless="true"></tabs>
		</view>
		<view class="page_scroll">
			<swiper :current-item-id="tabActive" @change="swiperChange" class="swiper-container">
				<swiper-item :item-id="tabs[0]">
					<scroll-view scroll-y="true" class="page_main" @scrolltolower="scrollBottom" :lower-threshold="100">
						<view class="list">
							<order-list :order-list="reserveList" @search="search"></order-list>
						</view>
						<view class="no-data">
							<view class="more">
								<uni-load-more :status="reserveMoreStatus" :content-text="reserveMoreContentText" iconType="spinner" color="#666666"></uni-load-more>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item :item-id="tabs[1]">
					<scroll-view scroll-y="true" class="page_main" @scrolltolower="scrollBottom" :lower-threshold="100">
						<view class="list">
							<order-list :order-list="proceedList" @search="search"></order-list>
						</view>
						<view class="no-data">
							<view class="more">
								<uni-load-more :status="proceedMoreStatus" :content-text="proceedMoreContentText" iconType="spinner" color="#666666"></uni-load-more>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item :item-id="tabs[2]">
					<scroll-view scroll-y="true" class="page_main" @scrolltolower="scrollBottom" :lower-threshold="100">
						<view class="list">
							<order-list :order-list="serveList" @search="search"></order-list>
						</view>
						<view class="no-data">
							<view class="more">
								<uni-load-more :status="serveMoreStatus" :content-text="serveMoreContentText" iconType="spinner" color="#666666"></uni-load-more>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item :item-id="tabs[3]">
					<scroll-view scroll-y="true" class="page_main" @scrolltolower="scrollBottom" :lower-threshold="100">
						<view class="list">
							<order-list :order-list="evaluateList" @search="search"></order-list>
						</view>
						<view class="no-data">
							<view class="more">
								<uni-load-more :status="evaluateMoreStatus" :content-text="evaluateMoreContentText" iconType="spinner" color="#666666"></uni-load-more>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item :item-id="tabs[4]">
					<scroll-view scroll-y="true" class="page_main" @scrolltolower="scrollBottom" :lower-threshold="100">
						<view class="list">
							<view class="list">
								<order-list :order-list="allList" @search="search"></order-list>
							</view>
							<view class="no-data">
								<view class="more">
									<uni-load-more :status="allMoreStatus" :content-text="allMoreContentText" iconType="spinner" color="#666666"></uni-load-more>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import orderList from './orderList.vue';
	import * as userServeApi from '@/api/userApi/serve.js';
	import { uniLoadMore } from '@dcloudio/uni-ui';
	export default {
		components:{
			orderList,
			uniLoadMore
		},
		data() {
			return {
				searchText: '',
				enums: this.$enums,
				tabs: ["已预约", "服务中", "已服务", "待评价", "全部订单"],
				tabActive: '已预约',
				allList: [],
				allSearchModel: {
					current: 1,
					size: 10,
					status: -1
				},
				// more
				allMoreStatus: 'more',
				allMoreContentText: {
					// 加载各状态文字说明。
					contentdown: '加载更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多了'
				},
				reserveList: [],
				reserveSearchModel: {
					current: 1,
					size: 10,
					status: this.$enums['用户订单状态']['已预约']
				},
				// more
				reserveMoreStatus: 'more',
				reserveMoreContentText: {
					// 加载各状态文字说明。
					contentdown: '加载更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多了'
				},
				serveList: [],
				serveSearchModel: {
					current: 1,
					size: 10,
					status: this.$enums['用户订单状态']['已服务']
				},
				// more
				serveMoreStatus: 'more',
				serveMoreContentText: {
					// 加载各状态文字说明。
					contentdown: '加载更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多了'
				},
				evaluateList: [],
				evaluateSearchModel: {
					current: 1,
					size: 10,
					status: this.$enums['用户订单状态']['待评价']
				},
				// more
				evaluateMoreStatus: 'more',
				evaluateMoreContentText: {
					// 加载各状态文字说明。
					contentdown: '加载更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多了'
				},
				proceedList: [],
				proceedSearchModel: {
					current: 1,
					size: 10,
					status: this.$enums['用户订单状态']['服务中']
				},
				// more
				proceedMoreStatus: 'more',
				proceedMoreContentText: {
					// 加载各状态文字说明。
					contentdown: '加载更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多了'
				},
			};
		},
		methods: {
			swiperChange(e) {
				this.$set(this, "tabActive", e.detail.currentItemId);
				if (this.tabActive == '已预约') {
					this.reserveSearchModel.current = 1;
					this.reserveSearchModel.search = this.searchText;
				} else if (this.tabActive == '服务中') {
					this.proceedSearchModel.current = 1;
					this.proceedSearchModel.search = this.searchText;
				} else if (this.tabActive == '已服务') {
					this.serveSearchModel.current = 1;
					this.serveSearchModel.search = this.searchText;
				} else if (this.tabActive == '待评价') {
					this.evaluateSearchModel.current = 1;
					this.evaluateSearchModel.search = this.searchText;
				} else {
					this.allSearchModel.current = 1;
					this.allSearchModel.search = this.searchText;
				}
				this.getOrderList();
			},
			search() {
				if (this.tabActive == '已预约') {
					this.reserveSearchModel.current = 1;
					this.reserveSearchModel.search = this.searchText;
				} else if (this.tabActive == '服务中') {
					this.proceedSearchModel.current = 1;
					this.proceedSearchModel.search = this.searchText;
				} else if (this.tabActive == '已服务') {
					this.serveSearchModel.current = 1;
					this.serveSearchModel.search = this.searchText;
				} else if (this.tabActive == '待评价') {
					this.evaluateSearchModel.current = 1;
					this.evaluateSearchModel.search = this.searchText;
				} else {
					this.allSearchModel.current = 1;
					this.allSearchModel.search = this.searchText;
				}
				this.getOrderList();
			},
			getOrderList() {
				if (this.tabActive == '已预约') {
					console.log('this.reserveSearchModel',this.reserveSearchModel);
					this.reserveMoreStatus = 'loading';
					userServeApi
						.queryMyService(this.reserveSearchModel)
						.then(res => {
							if (res.code === 0) {
								if (this.reserveSearchModel.current == 1) {
									this.reserveList = [];
								}
								if (res.data && res.data.length == 10) {
									this.reserveMoreStatus = 'more';
									this.reserveSearchModel.current += 1;
									this.reserveList = [...this.reserveList, ...res.data];
								} else if (res.data && res.data.length < 10) {
									this.reserveMoreStatus = 'noMore';
									this.reserveSearchModel.current += 1;
									this.reserveList = [...this.reserveList, ...res.data];
								} else {
									this.reserveMoreStatus = 'noMore';
								}
							}
						})
						.catch(e => {
							this.reserveMoreStatus = 'noMore';
							uni.showToast({
								title: e.msg,
								icon: 'none',
								duration: 1000
							});
						});
				} else if (this.tabActive == '已服务') {
					this.serveMoreStatus = 'loading';
					userServeApi
						.queryMyService(this.serveSearchModel)
						.then(res => {
							if (res.code === 0) {
								if (this.serveSearchModel.current == 1) {
									this.serveList = [];
								}
								if (res.data && res.data.length == 10) {
									this.serveMoreStatus = 'more';
									this.serveSearchModel.current += 1;
									this.serveList = [...this.serveList, ...res.data];
								} else if (res.data && res.data.length < 10) {
									this.serveMoreStatus = 'noMore';
									this.serveSearchModel.current += 1;
									this.serveList = [...this.serveList, ...res.data];
								} else {
									this.serveMoreStatus = 'noMore';
								}
							}
						})
						.catch(e => {
							this.serveMoreStatus = 'noMore';
							uni.showToast({
								title: e.msg,
								icon: 'none',
								duration: 1000
							});
						});
				} else if (this.tabActive == '服务中') {
					this.proceedMoreStatus = 'loading';
					userServeApi
						.queryMyService(this.proceedSearchModel)
						.then(res => {
							if (res.code === 0) {
								if (this.proceedSearchModel.current == 1) {
									this.proceedList = [];
								}
								if (res.data && res.data.length == 10) {
									this.proceedMoreStatus = 'more';
									this.proceedSearchModel.current += 1;
									this.proceedList = [...this.proceedList, ...res.data];
								} else if (res.data && res.data.length < 10) {
									this.proceedMoreStatus = 'noMore';
									this.proceedSearchModel.current += 1;
									this.proceedList = [...this.proceedList, ...res.data];
								} else {
									this.proceedMoreStatus = 'noMore';
								}
							}
						})
						.catch(e => {
							this.proceedMoreStatus = 'noMore';
							uni.showToast({
								title: e.msg,
								icon: 'none',
								duration: 1000
							});
						});
				} else if (this.tabActive == '待评价') {
					this.evaluateMoreStatus = 'loading';
					userServeApi
						.queryMyService(this.evaluateSearchModel)
						.then(res => {
							if (res.code === 0) {
								if (this.evaluateSearchModel.current == 1) {
									this.evaluateList = [];
								}
								if (res.data && res.data.length == 10) {
									this.evaluateMoreStatus = 'more';
									this.evaluateSearchModel.current += 1;
									this.evaluateList = [...this.evaluateList, ...res.data];
								} else if (res.data && res.data.length < 10) {
									this.evaluateMoreStatus = 'noMore';
									this.evaluateSearchModel.current += 1;
									this.evaluateList = [...this.evaluateList, ...res.data];
								} else {
									this.evaluateMoreStatus = 'noMore';
								}
							}
						})
						.catch(e => {
							this.evaluateMoreStatus = 'noMore';
							uni.showToast({
								title: e.msg,
								icon: 'none',
								duration: 1000
							});
						});
				} else {
					this.allMoreStatus = 'loading';
					userServeApi
						.queryMyService(this.allSearchModel)
						.then(res => {
							if (res.code === 0) {
								if (this.allSearchModel.current == 1) {
									this.allList = [];
								}
								if (res.data && res.data.length == 10) {
									this.allMoreStatus = 'more';
									this.allSearchModel.current += 1;
									this.allList = [...this.allList, ...res.data];
								} else if (res.data && res.data.length < 10) {
									this.allMoreStatus = 'noMore';
									this.allSearchModel.current += 1;
									this.allList = [...this.allList, ...res.data];
								} else {
									this.allMoreStatus = 'noMore';
								}
							}
						})
						.catch(e => {
							this.allMoreStatus = 'noMore';
							uni.showToast({
								title: e.msg,
								icon: 'none',
								duration: 1000
							});
						});
				}
			},
			// 滑动到底部。分页处理
			scrollBottom() {
				this.getOrderList();
			}
		},
		onBackPress(options) {
			uni.switchTab({
				url: '/pages/mine/mine'
			});
			return true;
		}, 
		onLoad(opction) {
			if (opction) {
				this.$set(this, "tabActive", opction.type);
				if (opction.type == '已预约') {
					this.search();
				}
			}
			
		}
	}
</script>

<style lang="stylus">
	.page_header_search_panel {
		margin-bottom 20rpx;
	}

	.page_scroll {
		position absolute;
		top calc(283rpx + var(--status-bar-height));
		right 0rpx;
		bottom 0rpx;
		left 0rpx;

		.page_main {
			padding 0rpx 30rpx;
			box-sizing border-box;
		}

		.swiper-container,
		.page_main {
			height 100%;
			background-color rgba(247, 247, 247, 1);

			.list {
				width: 100%;

				.list_item {
					display flex;
					flex-direction column;
					background-color #FFFFFF;
					border-radius: 12rpx;
					margin-top 20rpx;

					.info_panel {
						width: 100%;
						display: flex;
						justify-content: space-between;
						padding: 20rpx;
						box-sizing: border-box;

						.image {
							width: 204rpx;
							height: 204rpx;
							border-radius: 23rpx;
						}

						.info {
							flex: 1;
							margin-left: 20rpx;
							box-sizing: border-box;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.info_header {
								width: 100%;
								display: flex;
								justify-content: space-between;

								.title {
									flex: 1;
									margin-right: 10rpx;
									letter-spacing: 1rpx;
									font-size: 32rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #333333;
									display: flex;
									align-items: center;
									.titile_text{
										flex: 1;
										overflow: hidden;
										text-overflow: ellipsis;
										display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
										-webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
										-webkit-line-clamp: 1; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
										word-wrap: break-word;
									}
											
									.sign {
										margin-left: 10rpx;
										font-size: 28rpx;
										font-family: PingFang SC;
										font-weight: 400;
										color: #FFFFFF;
										padding: 4rpx;
										border-radius: 8rpx;
										transform: scale(0.7);
									}

									.green {
										background-color: rgba(0, 181, 0, 1);
									}

									.orange {
										background-color: rgba(246, 132, 21, 1);
									}
								}

								.type {
									margin-top: 5rpx;
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color rgba(255, 125, 33, 1);
								}
							}

							.info_container {
								flex: 1;
								margin-top: 15rpx;
								font-size: 24rpx;
								letter-spacing: 1rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #999999;

								.text {
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
									-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
									-webkit-line-clamp: 2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
									word-wrap: break-word;
								}
							}

							.info_footer {
								margin-top: 10rpx;
								display: flex;
								justify-content: space-between;

								.organization {
									background-color: rgba(37, 143, 255, 0.1);
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #4594FF;
									border-radius: 10rpx;
									padding: 3rpx 8rpx;
								}

								.count {
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #999999;
								}
							}
						}
					}

					.price_panel {
						margin-top 15rpx;
						padding 0rpx 20rpx;
						box-sizing border-box;

						.price {
							display flex;

							.total,
							.subsidy,
							.payment {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #999999;
								flex 1;
								text-align right;
							}

							.payment {
								color rgba(51, 51, 51, 1);
							}
						}

						.btn_panel {
							display flex;
							padding-top 30rpx;
							margin-bottom 20rpx;
							box-sizing border-box;
							.cancel,
							.detail,
							.confirm {
								display inline-block;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #999999;
								border 2rpx solid rgba(153, 153, 153, 1);
								padding 6rpx 20rpx;
								border-radius: 24rpx;
							}
							.detail {
								border-color rgba(255, 125, 33, 1);
								color rgba(255, 125, 33, 1);
							}
							.confirm {
								margin-left 30rpx;
								border-color rgba(255, 125, 33, 1);
								background-color rgba(255, 125, 33, 1);
								color rgba(255, 255, 255, 1);
							}

							.btn_left {
								flex 1;
							}
						}
					}
				}
			}
		}

	}
</style>
